<template>
  <section class="checkbox" :class="{'vertical': layout == 'vertical'}">
    <el-checkbox-group v-model="value" :disabled="disabled" @change="handleChange">
      <template v-if="type == 'button'">
        <el-checkbox-button v-for="(item, index) in list" :key="index" :label="item.value" :disabled="item.disabled">{{ item.name }}</el-checkbox-button>
      </template>
      <template v-else>
        <el-checkbox v-for="(item, index) in list" :key="index" :label="item.value" :disabled="item.disabled" @change="handleChange">{{ item.name }}</el-checkbox>
      </template>
    </el-checkbox-group>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VCheckbox',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {
        type: 'default',
        list: [
          { name: 'xxxx', value: 2 }
        ],
        layout: 'horizon',
        value: [],
        disabled: false,
        required: false,
        msg: ''
      }
    }
  },
  computed: {
    type () {
      return this.option.type || 'default'
    },
    list () {
      return this.option.list || []
    },
    layout () {
      return this.option.layout || 'horizon'
    }
  },
  methods: {
    getValue () {
      return this.value
    },

    setValue (v) {
      if (typeof v === 'string') {
        v = v.split(',');
      }
      this.$set(this, 'value', v)
    },

    setCheck () {
      const { required, value } = this
      if (required) {
        if (!value || value.length == 0) {
          this.error_ = true
          this.error_message_ = '必填选项不能为空'
        } else {
          this.error_ = false
        }
      } else {
        this.error_ = false
      }
      this.fieldCheck()
    },

    handleChange (e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.checkbox {
  /deep/ {
    .el-checkbox,
    .el-checkbox-button {
      margin-top: 5px;
    }
  }
  &.vertical {
    /deep/ {
      .el-checkbox,
      .el-checkbox-button {
        display: block;
      }
      .el-checkbox-button {
        .el-checkbox-button__inner {
          border: 1px solid #dcdfe6;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>